<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>ActualPlan</title>
		<link type="text/css" rel="stylesheet" href="../../Css/Finance/fn_actual_plan.css"/>
		<script type="text/javascript" src="../../mbostock-protovis/protovis.min.js"></script>
		<script src="../../libraryChartFinance/jqplot/jquery.js"></script>
		<link href="../../libraryChartFinance/kendoCommercial/styles/kendo.common.min.css" rel="stylesheet" />
		<link href="../../libraryChartFinance/kendoCommercial/styles/kendo.default.min.css" rel="stylesheet" />
		<script src="../../libraryChartFinance/kendoCommercial/js/kendo.all.min.js"></script>
		
		<script type="text/javascript" src="../../Controller/Finance/fn_actual_plan_main.js"></script>
		<script type="text/javascript" src="../../Controller/Finance/fn_actual_plan_exp.js"></script>
		<script type="text/javascript" src="../../Controller/Finance/fn_actual_plan_rec.js"></script>
		
		
	</head>
	
	<script type="text/javascript"> $(".Year").html($("#embfn_paramYear").val()) ;</script>
	<script type="text/javascript"> $(".Org").html($("#embfn_paramOrg").val()) ;</script>
	<script type="text/javascript"> $(".Dep").html($("#embfn_paramDep").val()) ;</script>
	
	<body>
		<div id = "body">
		<form id="formAction">
			<div id="Param">
				<div id = "ParamLeft">
					<div id = ParamLeft2>
						<div id = "FnParamYear" class = "ParamLeftSub">
							<div class = "ParamTitle">ปีประมาณ</div>
							<div class = "ParamSubTitle" id = "fn_paramYearList"></div>
						</div>
						
						<div id = "FnParamMonth" class = "ParamLeftSub">
							<div class = "ParamTitle">เดือน</div>
							<div class = "ParamSubTitle" id = "fn_paramMonthList"></div>
						</div>
						
						<div id = "FnParamDay" class = "ParamLeftSub">
							<div class = "ParamTitle">ณ วันที่</div>
							<div class = "ParamSubTitle" id = "fn_paramDayList"></div>
						</div>
						<div id = "FnParamArea" class = "ParamLeftSub">
							<div class = "ParamTitle">พื้นที่</div>
							<div class = "ParamSubTitle" id = "fn_paramAreaList"></div>
						</div>
						
						<div id = "FnParamOrg" class = "ParamLeftSub">
							<div class = "ParamTitle">คณะ|หน่วยงาน</div>
							<div class = "ParamSubTitle" id = "fn_paramOrgList"></div>
						</div>
						
						<div id = "FnParamDep" class = "ParamLeftSub">
							<div class = "ParamTitle">ภาควิชา</div>
							<div class = "ParamSubTitle" id = "fn_paramDepList"></div>
						</div>
						
					</div>
				</div>
					
				<div id = "ParamRight">	
					<div id="submit"> 
						<input type="submit" id="btnSubmit" name="btnSubmit" value="เรียกดูข้อมูล"  style="height:35px; width:auto; text-align:center ;font:16px Tahoma ;" >
					</div>
				</div>
			</div>
		</form>
		
		<div id = "title">
			การติดตามผลรายรับ-รายจ่ายตามงบประมาณ(รายไตรมาส)<br/>
			เพื่อใช้ในการบริหารเงิน ณ วันที่  <label class="Day"></label><br/>
			<label class="Org"></label> <label class="Dep"></label>
		</div>
		
		<div id="main">
			<div id="budpay">
				<div class = "budtitle">
					การใช้จ่ายงบประมาณ
				</div>
				
				<div id = "qbudpay">
					<table>
						<tr>
							<th>ไตรมาส 1</th>
							<th>ไตรมาส 2</th>
							<th>ไตรมาส 3</th>
							<th>ไตรมาส 4</th>	
							<td>หน่วย : ล้าน</td>				
						</tr>
					</table>
				</div>
			
				<div id = "tabudpay">
					<div id = "vabudpay">
					<script>
						var format = pv.Format.number();
						var vis_exp = new pv.Panel()
							.data(dataexp)
							.width(600)
							.height(35)
							.margin(20)
							.left(300);
	
						var bullet = vis_exp.add(pv.Layout.Bullet)
							.orient("left")
							.ranges(function(d) d.ranges)
							.measures(function(d) d.measures)
							.markers(function(d) d.markers);
	
						bullet.range.add(pv.Bar);
						
						bullet.measure.add(pv.Bar);
	
						bullet.marker.add(pv.Dot)
							.shape("triangle")
							.fillStyle("white");
	
						bullet.tick.add(pv.Rule)
						    .anchor("bottom").add(pv.Label)
						    .font("12px Tahoma")
							.text(bullet.x.tickFormat);
				
						bullet.anchor("left").add(pv.Label)
							.font("bold 16px Tahoma")
							.textAlign("right")
							.textBaseline("bottom")
							.text(function(d) d.title);
	
						bullet.anchor("left").add(pv.Label)
							.textStyle("#000")
							.textAlign("right")
							.textBaseline("top")
							.font("bold 12px Tahoma")
							.text(function(d) d.subtitle);
							
						vis_exp.render();
					</script>
					</div>
					<div id = "tableExp"></div>
					<br style="clear:both">
				</div>
				<br/>
			</div>
			
			<div id="budbe">
				<div class = "budtitle">
					รายรับจริง
				</div>
				
				<div id = "qbudbe">
					<table>
						<tr>
							<th>ไตรมาส 1</th>
							<th>ไตรมาส 2</th>
							<th>ไตรมาส 3</th>
							<th>ไตรมาส 4</th>		
							<td>หน่วย : ล้าน</td>				
						</tr>
					</table>
				</div>
				
				<div id = "tabudbe">
					<div id = "vabudbe">
					<script>
						var format = pv.Format.number();
						var vis_rec = new pv.Panel()
							.data(datarec)
							.width(600)
							.height(35)
							.margin(20)
							.left(300);
	
						var bullet = vis_rec.add(pv.Layout.Bullet)
							.orient("left")
							.ranges(function(d) d.ranges)
							.measures(function(d) d.measures)
							.markers(function(d) d.markers);
	
						bullet.range.add(pv.Bar);
						
						bullet.measure.add(pv.Bar);
	
						bullet.marker.add(pv.Dot)
							.shape("triangle")
							.fillStyle("white");
	
						bullet.tick.add(pv.Rule)
						    .anchor("bottom").add(pv.Label)
						    .font("12px Tahoma")
							.text(bullet.x.tickFormat);
				
						bullet.anchor("left").add(pv.Label)
							.font("bold 16px Tahoma")
							.textAlign("right")
							.textBaseline("bottom")
							.text(function(d) d.title);
	
						bullet.anchor("left").add(pv.Label)
							.textStyle("#000")
							.textAlign("right")
							.textBaseline("top")
							.font("bold 12px Tahoma")
							.text(function(d) d.subtitle);
							
						vis_rec.render();
					</script>
					</div>
					<div id = "tableRec"></div>
					<br style="clear:both">
				</div>
				<br/>
			</div>
		</div>

		</div>
	</body>
</html>